<template>
  <div :class="colArr">
    <div :class="sizeCls">
    <!-- {{data|json}} -->
      <span class="apex-group-addon">
          <span v-if='label' class="label">{{label}}</span>
          <span v-if='data'>{{data.key}}</span>
      <slot name='label'></slot>
      </span>
      <slot></slot>
      <span v-if='after' class="apex-group-addon">{{after}}</span>
      <slot name='after'></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    label: String,
    after: String,
    xs: {
      type: String,
      default: '24'
    },
    data:Object,
    sm: String,
    md: String,
    lg: String,
    size: {
      type: String,
      default: ''
    }
  },
  computed: {
    xsNum() {
      return this.xs ? `el-col-xs-${this.xs}`.trim() : ''
    },
    smNum() {
      return this.sm ? `el-col-sm-${this.sm}`.trim() : ''
    },
    mdNum() {
      return this.md ? `el-col-md-${this.md}`.trim() : ''
    },
    lgNum() {
      return this.lg ? `el-col-lg-${this.lg}`.trim() : ''
    },
    colArr() {
      return [this.xsNum, this.smNum, this.mdNum, this.lgNum]
    },
    sizeCls() {
      return ['apex-group', this.size ? `apex-group-${this.size}` : '']
    }
  }
}
</script>
<style scoped>
  .apex-group{
    width: 100%;
    margin: 6px 0;
    position: relative;
    display: table;
    border-collapse: separate;
    padding: 0 10px;
  }
  .apex-group-addon{
    width: 110px;
    display: table-cell;
    padding: 6px 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    color: #333333;
    text-align: left;
    border-radius: 4px;
  }
  .label{
    width: 110px;
    display: inline-block;
  }
</style>
